import { Cascader, Form, Input, Switch, Button,Spin } from "antd";
import React, { useEffect, useState } from "react";
import {catePost} from '../../../api/course'

const CateForm = (props) => {
  const [cateOption,setCateOption] = useState([
    {
      value: "100",
      label: "顶级类目"
    }
  ])
  const [loading,setLoading] = useState(false)
  useEffect(()=>{
    let list = props.catelist.map(item=>{
       return {
        value:item.objectId,
        label:item.catename
       }
    })
    setCateOption([...cateOption,...list])
  },[])
  const handleFinish = (values) => {
    //表单提交事件
    // console.log(values);
    setLoading(true)
    catePost(values).then(res=>{
      // console.log(res);
      // 方法1:
      // values.objectId = res.data.objectId
      // props.handleCateAdd(values)
      // 方法2:
      setTimeout(()=>{
        setLoading(false)
        let {objectId} = res.data
        props.handleCateAdd({...values,objectId})
      },1000)
    })
  };

  return (
    <Spin spinning={loading}>
      <Form
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 19,
      }}
      layout="horizontal"
      onFinish={handleFinish}
      initialValues={{catename:'正念冥想',isshow:true}}
    >
      <Form.Item
        label="分类名称"
        name="catename"
        rules={[
          {
            required: true,
            message: "请录入分类名称",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="上级分类"
        name="father"
        rules={[
          {
            required: true,
            message: "请选择上级分类",
          },
        ]}
      >
        <Cascader
          options={cateOption}
        />
      </Form.Item>
      <Form.Item label="是否上架" name="isshow" valuePropName="checked">
        <Switch/>
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          确认
        </Button>
      </Form.Item>
    </Form>
    </Spin>
    
  );
};

export default CateForm;
